<template>
  <aside class="tab-controller-aside">
    <p class="aside-msg">{{title}}</p>
    <p v-if="contType=='micro'" class="aside-btn-group">
      <a href="javascript:void(0)" @click="$router.push({name: 'WePage', parmas: {id: id}})">编辑</a>
      <a href="javascript:void(0)" @click="handleDialogOpen('version')">版本记录</a>
      <a href="javascript:void(0)" @click="handleDel">删除</a>
    </p>
    <div>{{$router.name}}</div>
    <div class="htmlContent scrollbar" v-html="previewHtml">
      <!-- <iframe class="viewIframe" :src="`${baseUrl}/content/${contType}/preview/${$route.params.id}`" frameborder="0"></iframe> -->
    </div>
    <v-dialog-content-version ref="dialogVersion"/>
  </aside>
</template>

<script type="text/babel">
  import {mapActions} from 'vuex'
  import Version from '../components/dialog/Version.vue'
  import {getWePageDetail, getFormDetail} from '@/service/getData'
  import env from '@/config/env'
  export default {
    data () {
      return {
        id: this.$route.params.id,
        title: '',
        htmlContent: '',
        iframeSrc: ''

      }
    },
    mounted () {
      this.getContentDetail()
    },
    components: {
      'v-dialog-content-version': Version
    },
    computed: {
      baseUrl () {
        return env.baseUrl2
      },
      // 类型（微页面或表单）
      contType () {
        return this.$route.path.indexOf('minPage') !== -1 ? 'micro' : 'form'
      },
      previewHtml () {
        const exp = /(<div class="el_form".*?>)(<\/div>)/
        const html = this.htmlContent.replace(exp, '$1' + this.formHtml + '$2')
        return html
      }
    },
    methods: {
      ...mapActions(['delWePages']),
      handleDialogOpen (type) {
        if (type === 'version') {
          // 渠道设置开启
          this.$refs.dialogVersion.init()
        }
      },
      // 获取微页面/表单详情
      async getContentDetail () {
        const fn = this.contType === 'micro' ? getWePageDetail : getFormDetail
        const res = await fn(this.id)
        this.title = res.data.data.title
        this.htmlContent = res.data.data.content
        this.formHtml = res.data.data.formPreView && res.data.data.formPreView.content || ''
      },
      // 删除微页面
      async handleDel (id) {
        await this.$confirm('是否确认删除', '确认')
        const res = await this.delWePages([this.id])
        if (res.data.code === 1) {
          this.$router.push({name: 'MyWepageContent'})
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss">
  .tab-controller-aside {
    width: 360px;
    min-width: 200px;
    max-width: 450px;
    .aside-msg {
      padding: 15px 10px;
      background-color: #f2f2f2;
      font-size: 13px;
      margin-bottom: 13px;
    }
    .aside-btn-group {
      font-size: 13px;
      text-align: right;
      background-color: #f2f2f2;
      padding: 15px 10px;
      a {
        cursor: pointer;
        color: #000;
        text-decoration: none;
        margin-left: 15px;
      }
    }
    .htmlContent {
      border: 1px solid #f2f2f2;
      position: relative;
      min-height: 300px;
      // max-height: 550px;
      padding: 10px 0 30px;
      overflow:auto;
    }
  }

</style>
